<!DOCTYPE html>
<html>
<head>
<title>转码模板</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="./css/common/common.css" />
<link rel="stylesheet" href="./css/template/template.css" />
</head>
<body>
<div class="side-bar">
	<div><a href="./upload.html">文件上传</a></div>
	<div><a href="./template.html">转码模板</a></div>
	<div><a href="./transcode.html">转码任务</a></div>
</div>
<div class="content-space">
	<div>
		<div class="search-area">
			<div class="search-input">
				<span>名称：</span><input type="text" id="templateName"/>
				<span>是否为选定模板：</span>
				<select id="favoriteFlag">
					<option value="true">是</option>
					<option value="false">否</option>
				</select>
				<span>模板类型：</span>
				<select id="templateType">
					<option value="SYS">系统模板</option>
					<option value="USER">用户自定义模板</option>
				</select>
				<button class="demo-btn primary" onclick="search();">搜索</button>
			</div>
		</div>
	</div>
	<div>
		<button class="demo-btn primary create-btn" onclick="createTemplate();">创建转码模板</button>
	</div>
	<div class="template-table">
		<table>
			<thead>
				<tr>
					<th>模板ID</th>
					<th>名称</th>
					<th>模板类型</th>
					<th>是否为选定模板</th>
					<th>格式</th>
					<th>是否加密</th>
					<th>视频编码</th>
					<th>视频码率</th>
					<th>视频帧率</th>
					<th>视频高度</th>
					<th>视频宽度</th>
					<th>自动翻转</th>
					<th>音频编码</th>
					<th>音频码率</th>
					<th>采样频率</th>
				</tr>
			</thead>
			<tbody id="template-list">
			</tbody>
		</table>
	</div>
	<div class="template-page">
		<div class="page-control">
			<span style="font-size: 14px;" id="page-index">第1/1页</span>
			<button class="demo-btn default" onclick="prePage();">上一页</button>
			<button class="demo-btn default" onclick="nextPage();">下一页</button>
		</div>
	</div>
	<div class="template-modal" style="display:none;">
		<div class="modal-title"><span>新建转码模板</span></div>
		<div class="modal-body">
			<div>
				<span>模板名称：</span>
				<input type="text" id="create-name"/>
			</div>
			<div>
				<span>选定模板：</span>
				<select id="create-favorite">
					<option value="">---</option>
					<option value="true">是</option>
					<option value="false">否</option>
				</select>
			</div>
			<div>
				<span>视频格式：</span>
				<select id="create-format">
					<option value="MP4">MP4</option>
					<option value="FLV">FLV</option>
					<option value="HLS">HLS</option>
				</select>
			</div>
			<div id="encryption-div" style="display:none;">
				<span>加密视频：</span>
				<select id="create-encrytion">
					<option value="true">是</option>
					<option value="false">否</option>
				</select>
				<span>视频格式为HLS时有效</span>
			</div>
			<div>
				<span>视频编码：</span>
				<select id="create-codecVideo">
					<option value="H264">H264</option>
					<option value="H265" disabled>H265</option>
				</select>
				<span class="explanation">视频格式为FLV时仅支持 H264</span>
			</div>
			<div>
				<span>视频码率：</span>
				<input type="text" id="create-bitRateVideo"/><span class="unit">kbps</span>
			</div>
			<div>
				<span>视频帧率：</span>
				<input type="text" id="create-frameRateVideo"/><span class="unit">fps(默认为24)</span>
			</div>
			<div>
				<span>视频高度：</span>
				<input type="text" id="create-heightVideo"/><span class="unit">px</span>
			</div>
			<div>
				<span>视频宽度：</span>
				<input type="text" id="create-widthVideo"/><span class="unit">px</span>
			</div>
			<div>
				<span>自动旋转：</span>
				<select id="create-autoRotateVideo">
					<option value="true">是</option>
					<option value="false">否</option>
				</select>
				<span class="explanation">高 >宽 翻转视频</span>
			</div>
			<div>
				<span>音频编码：</span>
				<select id="create-codecAudio">
					<option value="AAC">AAC</option>
					<option value="MP3">MP3</option>
				</select>
			</div>
			<div>
				<span>音频码率：</span>
				<input type="text" id="create-bitRateAudio"/><span class="unit">kbps(建议64/96/128/192/256/320)</span>
			</div>
			<div>
				<span>音频采样频率：</span>
				<select id="create-sampleRateAudio">
					<option value="44100">44100</option>
					<option value="48000">48000</option>
				</select>
				<span class="unit">HZ</span>
			</div>
		</div>
		<div class="modal-foot">
			<div class="modal-btn">
			<button class="demo-btn default" onclick="cancel();">取消</button>
			<button class="demo-btn primary" onclick="confirm();">确定</button>
			</div>
		</div>
	</div>
</div>
</body>
<script src="./js/ajax/ajax.js"></script>
<script src="./js/template/template.js"></script>
<script>
	document.addEventListener("DOMContentLoaded", search, false);
</script>
</html>